<template>
  <div class="error-log">
    <el-table :data="tableList" stripe style="width: 100%" v-loading="listLoading">
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column prop="path_url" label="请求接口" min-width="180"></el-table-column>
      <el-table-column prop="error_code" label="状态码" min-width="80"></el-table-column>
      <el-table-column prop="errorValue" label="错误信息" min-width="180"></el-table-column>
      <el-table-column prop="error_msg" label="错误描述" min-width="180">
        <template slot-scope="{ row }">
          <el-button v-if="isToLong(row)" type="danger" size="small" slot="reference"
            @click="showDialog(row.error_msg)">查看异常</el-button>
          <span v-else>{{ row.error_msg}}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.error_time) }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pageWrapper">
      <pagination v-show="total>0" :total="total" :layout="'total, prev, pager, next'" :page.sync="resForm.page"
        :limit.sync="size" @pagination="handlePage" />
    </div>
    <div class="errorTip">
      <el-dialog title="提示" :visible.sync="dialogVisible" width="70%">
        <p v-html="errorDesc"></p>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import Pagination from '@/components/Pagination'
  import { parseTime } from '@/utils/index.js'
  import {
    getErrorLog
  } from '@/api/system'
  export default {
    name: 'ErrorLog',
    components: {
      Pagination
    },
    data() {
      return {
        size: 10,
        total: 0,
        listLoading: true,
        dialogVisible: false,
        tableList: [],
        errorDesc: '',
        resForm: {
          page: 1
        },
      }
    },
    mounted() {
      this.requestErrorLog()
    },
    methods: {
      parseTime,
        // 判断字段是否过长
      isToLong(row) {
        if (row.error_code == 500 || row.error_msg.length > 50) {
          return true
        }
        return false
      },
      showDialog(str) {
        str = JSON.stringify(str)
        this.dialogVisible = true
        this.errorDesc = str.replace(/\\n/g, "<br/>")

      },
      // 搜索
      handleFilter() {
        this.resForm.page = 1
      },
      // 处理分页
      handlePage(pager) {
        // 需要请求后端
        const {
          page
        } = pager
        this.resForm.page = page,
          this.requestErrorLog()
      },
      // 请求异常日志
      requestErrorLog() {
        this.listLoading = true
        getErrorLog(this.resForm).then(
          res => {
            this.tableList = res.data.results
            this.total = res.data.count
            this.listLoading = false
          }
        )
      }
    }
  }

</script>
<style lang="scss">
  .error-log {
    padding: 20px;
    background: #fff;

    .pageWrapper {
      overflow: hidden;
      margin-top: 10px;
    }
  }

</style>
